﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link href="~/Content/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="~/Content/jquery-ui/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/msgBoxLight.css" rel="stylesheet" />
    <link href="~/Content/master.css" rel="stylesheet" />

    <link rel="stylesheet" href="~/Content/jstree/themes/proton/style.css" />
    @*<link rel="stylesheet" href="~/Content/jstree/themes/docs.css" />*@

    <script type="text/javascript" src="~/Scripts/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery-ui-1.10.3.min.js"></script>

    <script type="text/javascript" src="~/Scripts/jquery/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.msgBox.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootbox.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="~/Scripts/handlebars.js"></script>
    <script type="text/javascript" src="~/Scripts/jshelper.js"></script>

    <script type="text/javascript" src="~/Scripts/jquery/jstree.js"></script>

    <style>
        .proton-demo {
            max-width: 100%;
            padding: 10px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <header id="head">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h3 style="display: block; margin: 10px auto; color: #fff; font-size: 30px; border: none;">JSTREE BOOTSTRAP THEME DEMO</h3>
                </div>
            </div>
        </div>
    </header>
    <div class="container" id="content">
        <div class="row page" style="display: block;" id="docs">
            <div class="col-md-12">
                <h3>What is jsTree Bootstrap Theme?</h3>
                <div class="row">
                    <div class="col-md-12">
                        <p>jsTree Bootstrap Theme is created as a part of <a href="http://themeforest.net/item/proton-ui-responsive-admin-panel-theme/6240793">Proton UI Responsive Admin Panel Theme</a>.</p>
                        <p>Since there aren't many jsTree 3 themes out there, we thought we'd make this one freely available. Enjoy!</p>
                        <p>Download from Github: <a href="https://github.com/orangehill/jstree-bootstrap-theme">https://github.com/orangehill/jstree-bootstrap-theme</a></p>
                    </div>
                </div>
                <h3>Responsiveness</h3>
                <div class="row">
                    <div class="col-md-12">
                        <p>jsTree Bootstrap Theme is responsive. To see the effect go ahead and scale a browser window down until the window width is less then 768 pixels. Mobile friendly design should make it easier to tap nodes with more precision</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div id="jstree-proton-1" style="margin-top:20px;" class="proton-demo">
                            <ul>
                                <li>
                                    Root node (basic)
                                    <ul>
                                        <li data-jstree='{ "selected" : true }'>
                                            <a href="#">
                                                <em>initially</em>
                                                <strong>selected</strong>
                                            </a>
                                        </li>
                                        <li data-jstree='{ "icon" : "./assets/images/tree_icon.png" }'>custom icon URL</li>
                                        <li data-jstree='{ "opened" : true }'>
                                            initially open
                                            <ul>
                                                <li>Another node</li>
                                            </ul>
                                        </li>
                                        <li data-jstree='{ "icon" : "glyphicon glyphicon-leaf" }'>Custom icon class (bootstrap)</li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="http://www.jstree.com">Root node 2</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-8" style="margin-top:20px;">
                        <pre><code><span class="comment">// An example of simple responsive jsTree</span>
    $('#jstree-proton-1').jstree({
        'core': {
            'themes': {
                'name': 'proton',
                'responsive': true
            }
        }
    });
    </code></pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div id="jstree-proton-2" style="margin-top:20px;" class="proton-demo">
                            <ul>
                                <li>
                                    Root node (wholerow mode)
                                    <ul>
                                        <li data-jstree='{ "selected" : true }'>
                                            <a href="#">
                                                <em>initially</em>
                                                <strong>selected</strong>
                                            </a>
                                        </li>
                                        <li data-jstree='{ "icon" : "./assets/images/tree_icon.png" }'>custom icon URL</li>
                                        <li data-jstree='{ "opened" : true }'>
                                            initially open
                                            <ul>
                                                <li>Another node</li>
                                            </ul>
                                        </li>
                                        <li data-jstree='{ "icon" : "glyphicon glyphicon-leaf" }'>Custom icon class (bootstrap)</li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="http://www.jstree.com">Root node 2</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-8" style="margin-top:20px;">
                        <pre><code><span class="comment">// An example of responsive jsTree with wholerow plugin.</span>
    $('#jstree-proton-2').jstree({
        'plugins': ["wholerow"],
        'core': {
            'themes': {
                'name': 'proton',
                'responsive': true
            }
        }
    });
    </code></pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div id="jstree-proton-3" style="margin-top:20px;" class="proton-demo"></div>
                    </div>
                    <div class="col-md-8" style="margin-top:20px;">
                        <pre><code><span class="comment">// An example of responsive jsTree with wholerow and checbox plugins.</span>
    $('#jstree-proton-3').jstree({
        'plugins': ["wholerow", "checkbox"],
        'core': {
            'data': [{
                    "text": "Wholerow with checkboxes",
                    "children": [{
                        "text": "initially selected",
                        "state": {
                            "selected": true
                        }
                    }, {
                        "text": "custom icon URL",
                        "icon": "./assets/images/tree_icon.png"
                    }, {
                        "text": "initially open",
                        "state": {
                            "opened": true
                        },
                        "children": ["Another node"]
                    }, {
                        "text": "custom icon class",
                        "icon": "glyphicon glyphicon-leaf"
                    }]
                },
                "And wholerow selection"
            ],
            'themes': {
                'name': 'proton',
                'responsive': true
            }
        }
    });
    </code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    $(function() {
        $('#jstree-proton-1').jstree({
            'core': {
                'themes': {
                    'name': 'proton',
                    'responsive': true
                }
            }
        });
        $('#jstree-proton-2').jstree({
            'plugins': ["wholerow"],
            'core': {
                'themes': {
                    'name': 'proton',
                    'responsive': true
                }
            }
        });
        $('#jstree-proton-3').jstree({
            'plugins': ["wholerow", "checkbox"],
            'core': {
                'data': [{
                        "text": "Wholerow with checkboxes",
                        "children": [{
                            "text": "initially selected",
                            "state": {
                                "selected": true
                            }
                        }, {
                            "text": "custom icon URL",
                            "icon": "./assets/images/tree_icon.png"
                        }, {
                            "text": "initially open",
                            "state": {
                                "opened": true
                            },
                            "children": ["Another node"]
                        }, {
                            "text": "custom icon class",
                            "icon": "glyphicon glyphicon-leaf"
                        }]
                    },
                    "And wholerow selection"
                ],
                'themes': {
                    'name': 'proton',
                    'responsive': true
                }
            }
        });
    });
    </script>
    <a class="hidden-xs hidden-sm" href="https://github.com/orangehill/jstree-bootstrap-theme">
        <img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub">
    </a>
</body>
</html>
